<template>
  <div id="flight-order-detail">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/tbooking/orders">TBooking订单</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <div class="card">
        <table class="table table-sm table-striped table-hover small">
          <thead>
            <tr>
              <th>出票单号</th>
              <th>简述</th>
              <th>状态</th>
              <th>行程/人数</th>
              <th>创建时间</th>
              <th>政策ID</th>
              <th>政策代码</th>
              <th>认领人</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ detail.orderId }}</td>
              <td>{{ detail.orderDesc }}</td>
              <td>{{ getOrderStatus(detail.orderStatus) }}</td>
              <td>
                {{ getFlightWayDesc(detail.flightWay) }}/{{ detail.itemCount }}
              </td>
              <td>{{ detail.orderDateTime }}</td>
              <td>{{ detail.policyId }}</td>
              <td>{{ detail.policyCode }}</td>
              <td>{{ detail.operator }}</td>
            </tr>
          </tbody>
        </table>
        <div class="card-body bg-info text-white py-0">航班信息</div>
        <table class="table table-striped table-hover table-sm small">
          <thead>
            <tr>
              <th>出发</th>
              <th>到达</th>
              <th>出发日期</th>
              <th>航班号</th>
              <th>出发时间</th>
              <th>到达时间</th>
              <th>舱位</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(info, index) in detail.flights">
              <td>
                <span class="text-success">{{ info.dport }}</span>
              </td>
              <td>
                <span class="text-success">{{ info.aport }}</span>
              </td>
              <td>{{ info.departureTime }}</td>
              <td>{{ info.flightNo }}</td>
              <td>{{ info.departureTime }}</td>
              <td>{{ info.cabinClass }}</td>
              <td>{{ info.subclass }}</td>
            </tr>
          </tbody>
        </table>
        <div class="card-body bg-info text-white py-0">乘机人信息</div>
        <table class="table table-striped table-hover table-sm small">
          <thead>
            <tr>
              <th class="text-end">票号</th>
              <th class="text-end">姓名</th>
              <th>证件</th>
              <th>dcity</th>
              <th>acity</th>
              <th>flightNo</th>
              <th>dtime</th>
              <th>atime</th>
              <th>class</th>
              <th>大编/小编</th>
              <th>底价</th>
              <th>税</th>
              <th>燃油</th>
              <th>进价</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(info, index) in detail.tickets">
              <td>{{ info.airlineCode }}-{{ info.ticketNo }}</td>
              <td class="text-end">
                {{ info.psgName }}
              </td>
              <td>{{ info.cardType }}: {{ info.cardNo }}</td>
              <td>{{ info.dcity }}/{{ info.dport }}</td>
              <td>{{ info.acity }}/{{ info.aport }}</td>
              <td>{{ info.flightNo }}</td>
              <td>
                {{ info.dtime }}
              </td>
              <td>
                {{ info.atime }}
              </td>
              <td>{{ info.cabinClass }} / {{ info.subClass }}</td>
              <td>{{ info.airlinePnrNo }} / {{ info.agencyPnrNo }}</td>
              <td>{{ info.cost }}</td>
              <td>{{ info.tax }}</td>
              <td>{{ info.oilFee }}</td>
              <td>{{ info.purchasePrice }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card">
        <div class="card-body small">
          <button
            class="btn btn-primary btn-sm ms-auto me-auto"
            :disabled="btnDisabled"
            @click.stop="assignOrder()"
          >
            认领
          </button>

          <button
            class="btn btn-warning btn-sm ms-2 me-auto"
            :disabled="btnDisabled"
            @click.stop="cancelAssignOrder()"
          >
            取消认领
          </button>
          <button
            class="btn btn-success btn-sm ms-5 me-auto"
            :disabled="btnDisabled"
            @click.stop="printTicket()"
          >
            出票
          </button>

          <a
            href="javascript:void(0)"
            class="float-end"
            @click.stop="viewHistory()"
            >查看历史记录</a
          >
        </div>
        <table class="table table-sm table-striped small">
          <tr>
            <td>操作员</td>
            <td>内容</td>
            <td>时间</td>
          </tr>
          <tr v-for="info in histories" :key="info.id">
            <td>{{ info.operator }}</td>
            <td>{{ info.content }}</td>
            <td>{{ info.createTime }}</td>
          </tr>
        </table>
      </div>
    </template>

    <my-modal-prompt ref="modalPrompt" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
    <my-modal-fill-ticket-no ref="fillTicketNoModal"></my-modal-fill-ticket-no>
  </div>
</template>

<script>
import $ from "jquery";
import { APP_FLIGHT_PATH } from "@/common/common.js";
import {
  searchTbookingOrderDetail,
  assignTbookingOrder,
  cancelAssignTbookingOrder,
  printTbookingOrderTicket,
  searchOrderHistory,
} from "@/api/tbooking.js";
import {
  showFlightOrderStatus,
  showPayType,
  showPsgType,
} from "@/common/common.js";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import MyModalFillTicketNo from "@/components/modal/my-modal-fill-ticketno.vue";

export default {
  components: {
    MyModalPrompt,
    MyModalFillTicketNo,
  },
  data() {
    return {
      detail: null,
      id: 0,
      orderNo: "",
      histories: [],

      remark: "",
      modalTitle: "",
      modalTitle2: "",
      modalNullable: false,

      btnDisabled: false,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
    psgCount: function () {
      if (this.detail !== null) {
        this.priceInfo.ticketCount = this.detail.passengers.length;
        return this.priceInfo.ticketCount;
      } else {
        this.priceInfo.ticketCount = 1;
        return 1;
      }
    },
    supplierId: function () {
      if (this.detail === null || this.detail.supplier === null) {
        return 0;
      } else {
        return this.detail.supplier.id;
      }
    },
    payMethodId: function () {
      if (this.detail === null || this.detail.paymentMethod === null) {
        return 0;
      } else {
        return this.detail.paymentMethod.id;
      }
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    // console.log(this.id)
    // console.log(this.$route)
    if (this.id === 0) {
      this.orderNo = this.$route.query.orderNo;
      // console.log(this.orderNo)
    }
    this.searchOrderDetail();
  },
  updated: function () {
    $('[data-bs-toggle="tooltip"]').tooltip();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    searchOrderDetail: function () {
      searchTbookingOrderDetail(this.id, (val) => {
        this.detail = val;
      });
    },
    getStatusDesc: function (status) {
      return showFlightOrderStatus(status);
    },
    getPayTypeDesc: function (payType) {
      return showPayType(payType);
    },
    showPsgType: function (psgType) {
      return showPsgType(psgType);
    },

    editRemark: function () {
      this.modalTitle = "请输入新的备注：";
      this.modalNullable = false;
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          updateFlightOrderRemark(this.id, { remark: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    cancelOrder: function () {
      this.modalTitle = "请输入取消订单的理由：";
      this.modalNullable = false;
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          cancelFlightOrder(this.id, { reasonDesc: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    assignOrder: function () {
      this.btnDisabled = true;
      this.showLoading("处理中");
      assignTbookingOrder(
        this.id,
        (v) => this.commonShowMessage(v),
        () => {
          this.btnDisabled = false;
          this.hideLoading();
        }
      );
    },
    cancelAssignOrder: function () {
      this.btnDisabled = true;
      this.showLoading("处理中");
      cancelAssignTbookingOrder(
        this.id,
        (v) => this.commonShowMessage(v),
        () => {
          this.btnDisabled = false;
          this.hideLoading();
        }
      );
    },
    printTicket: function () {
      this.showLoading("处理中");
      printTbookingOrderTicket(
        this.id,
        (v) => this.commonShowMessage(v),
        () => this.hideLoading()
      );
    },
    toTicketOrder: function () {
      this.btnDisabled = true;
      this.showLoading("处理中");
      toticketFlightOrder(
        this.id,
        (v) => {
          this.commonShowMessage(v);
        },
        () => {
          this.btnDisabled = false;
          this.hideLoading();
        }
      );
    },
    finishOrder: function () {
      // 此处允许修改出票日期
      this.modalTitle = "请输入出票日期（默认当天)：";
      this.$refs.updateDateModal
        .modal()
        .then((remark) => {
          finishFlightOrder(this.id, { etdzDate: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    fillTicketNo: function () {
      // console.log(this.detail.passengers)
      this.$refs.fillTicketNoModal
        .modal(this.detail.passengers)
        .then((info) => {
          updateFlightOrderTicket(this.id, JSON.stringify(info), (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("失败：" + jsonResult.errmsg, "danger");
      } else {
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
        this.searchOrderDetail();
      }
    },
    getOrderStatus: function (status) {
      switch (status) {
        case "1":
          return "未出票";
        case "2":
          return "自动出票失败";
        case "3":
          return "出票成功";
        case "4":
          return "已取消";
        case "5":
          return "已作废";
        case "6":
          return "已入库";
        case "7":
          return "已支付";
        case "8":
          return "验证中";
        default:
          return status;
      }
    },
    getFlightWayDesc: function (val) {
      switch (val) {
        case "1":
          return "单程";
        case "2":
          return "往返";
        case "3":
          return "联程";
        case "4":
          return "多程";
        default:
          return val;
      }
    },
    viewHistory: function () {
      searchOrderHistory(this.id, (jsonResult) => {
        this.histories = jsonResult;
      });
    },
  },
};
// 874
</script>